<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>作用域插槽</title>
</head>
<body>

<!--有时让插槽内容能够访问子组件中才有的数据是很有用的-->

<div id="app">

  <current-user>
    <template slot-scope="slotProps">
      {{ slotProps.user.firstName }}
      {{slotProps.bb}}
    </template>
  </current-user>

</div>

<script src="../lib/vue.js"></script>
<script>
  Vue.component('current-user', {
    template: `
      <span>
        <slot v-bind:user="user" :bb="123">
          {{ user.lastName }}
        </slot>
      </span>
    `,
    data: function () {
      return {
        user: {
          firstName: '保尔'
        }
      }
    }
  })

  let vm = new Vue({
    el: '#app',
  })
</script>

</body>
</html>